<template>
  <div class="second-page">
    <ComTopNum/>
    <div class="bottom-box">
        <ComNavTab :text="'近'+(currentTab==1 ? '7': currentTab==2 ? '30': '60')+'天新增激活'"/>
        <div class="tab-wrapper">
          <div class="tab-container">
            <div class="tabs">
              <div
                class="tabs-item"
                v-for="tab in tabs"
                :key="tab.value"
                :class="['tab-button', { active: currentTab === tab.value }]"
                @click="currentTabClick(tab.value)">
                {{ tab.label }}
              </div>
            </div>
          </div>
        </div>          
        <ComBaseEcharts
           echartId="TmsLineBottomReSecond"
          :options="getOptionsForLineBottomRef"
          style="width:100%;height:80%;"
        />
    </div>
    <div class="bottom-box startup">
        <ComNavTab :text="'近'+(currentTab==1 ? '7': currentTab==2 ? '30': '60')+'天开机次数'"/>         
        <ComBaseEcharts
           echartId="TmsLineBottomReSecond7OpenCount"
          :options="getOptionsForLineStartUpBottomRef"
          style="width:100%;height:80%;"
        />
    </div>
    <div class="bottom-box">
        <ComNavTab :text="'近'+(currentTab==1 ? '7': currentTab==2 ? '30': '60')+'天活跃终端'"/>         
        <ComBaseEcharts
           echartId="TmsLineBottomReSecond7ActiveTerminal"
          :options="getOptionsForLineActiveBottomRef"
          style="width:100%;height:80%;"
        />
    </div>
    <div class="bottom-box table" :class="currentTab==1?'height400':'height440'">
      <com-table
        style="z-index: 3"
        :scrollHeight="scrollHeight"
        :isIndex="false"
        :colorKey="['startUpRate']"
        :listData="appStartList"
        :hederTextArray="[
            { title: '日期', width: '14.3%' },
            { title: '累计激活量', width: '14.3%' },
            { title: '新增激活量', width: '14.3%' },
            { title: '开机次数', width: '14.3%' },
            { title: '活跃终端', width: '14.3%' },
            { title: '平均开机次数', width: '14.3%' },
            { title: '开机率', width: '14.3%'}
        ]"
        :tableTextArray="[
            'statDate',
            'totalActiveTerms',
            'newActiveTerms',
            'startups',
            'activeTerms',
            'startupAverage',
            'startUpRate'
        ]"
        ></com-table>      
    </div>       
  </div>
</template>
<script setup>
  import { ref, onMounted } from "vue";
  import { getToday } from '@/utils/func/util'
  import ComNavTab from '@/components/public/ComNavTab.vue';
  import ComBaseEcharts from '@/components/public/ComBaseEcharts.vue'
  import { getOptionsForLineBottom } from './option.js'
  import ComTable from '@/components/public/ComTab/indexView.vue'
  import ComTopNum from '@/views/tms/components/ComTopNum.vue'
  import { getTmsDate } from '@/api/tms/tms.js'

  const scrollHeight =  ref('400px')
  const appStartList = ref([])
  //折线图
  const currentTab = ref('1')
  const xData = []
  const getOptionsForLineBottomRef = ref(getOptionsForLineBottom(xData,[],'1'))
  const getOptionsForLineStartUpBottomRef = ref(getOptionsForLineBottom(xData,[],'1'))
  const getOptionsForLineActiveBottomRef = ref(getOptionsForLineBottom(xData,[],'1'))
  const tabs = ref( [
          { value: '1', label: '近7天' },
          { value: '2', label: '近30天' },
          { value: '3', label: '近60天' },
        ])  

  const getLineDataFn = () => {
    let queryParam = {
      dateNum: currentTab.value == 1 ? 7 : currentTab.value == 2 ? 30 : 60,
      statDate: getToday()
    }
    getTmsDate(queryParam).then(res => {
      const { data } = res
      if(data.length > 0){
        const dataArr = data
        dataArr.sort((a, b) => new Date(a.statDate) - new Date(b.statDate));
        //激活
        const xData = dataArr.map(v => v.statDate)
        const yData = dataArr.map(v => v.newActiveTerms)
        getOptionsForLineBottomRef.value = getOptionsForLineBottom(xData, yData, currentTab.value)
        //开机次数
        const startUpYData = dataArr.map(v => v.startups)
        getOptionsForLineStartUpBottomRef.value = getOptionsForLineBottom(xData, startUpYData, currentTab.value)
        //活跃终端
        const activeYData = dataArr.map(v => v.activeTerms)
        getOptionsForLineActiveBottomRef.value = getOptionsForLineBottom(xData, activeYData, currentTab.value)
        //表格展示
        let tabData =  dataArr.sort((a, b) => new Date(b.statDate) - new Date(a.statDate));
         tabData = tabData.map(v => {
          return {
            statDate: v.statDate,
            totalActiveTerms: v.totalActiveTerms.toLocaleString(),
            newActiveTerms: v.newActiveTerms.toLocaleString(),
            startups: v.startups.toLocaleString(),
            activeTerms: v.activeTerms.toLocaleString(),
            startupAverage: currentTab.value == 1? Number((v.startups / 7).toFixed(0)).toLocaleString(): currentTab.value == 2 ? Number((v.startups / 30).toFixed(0)).toLocaleString() : Number((v.startups / 60).toFixed(0)).toLocaleString(),
            startUpRate: v.percentageForYesterday
          }
        })
        appStartList.value = tabData
      }
    })
  }
  onMounted(() => {
    getLineDataFn()
  })
   //tab选项卡
   const currentTabClick = (value) => {
    currentTab.value = value
    currentTab.value == 1 ? scrollHeight.value='400px' : scrollHeight.value='440px',
    getLineDataFn()
  }    
</script>
<style lang="scss" scoped>
.second-page {
  .asset-table-box{
    padding-top: 0 !important;
  }
  padding: 0 40px 60px 40px;
  .center-box{
    display: flex;
    height: 500px;
    padding-top: 25px;
    // background-image: url('/src/assets/BG2.png');
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    &-left{
      width: 50%;
    }
    &-right{
      width: 50%;
      margin-left:20px;
    }
  }
  .bottom-box{
    height: 500px;
    // &.table{
    //   height:440px;
    // }
    &.startup{
      padding-top: 45px;
    }
  }
}
.tab-container {
    padding-top: 20px;
    padding-left: 40px;
  }
.tabs {
    display: flex;
    border-radius: 10px;
    justify-content: flex-end;
  }
  .tabs-item{
    width: 100px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    background: url('/src/assets/button_normal.png') 0 0 no-repeat;
    background-size: 100% 100%;
    color: #fff;
    cursor: pointer;
    text-align: center;
    margin-right: 10px;
    font-weight: bold;
  }
  .tabs-item.active {
    background: url('/src/assets/button_avtived.png') 0 0 no-repeat;
    background-size: 100% 100%;
    color: #4C98FF;
  }
  .height400{
    height: 400px !important;
  }
  .height440{
    height: 440px !important;
  }
</style>
